<!DOCTYPE html>
<html lang='en'>

<head>
    <meta charset='UTF-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <meta http-equiv='X-UA-Compatible' content='ie=edge'>
    <title>Document</title>
</head>
<!-- 组件就是封装好的结构样式逻辑代码的一个功能性代码,重用,分治 -->

<body>
    <!-- 组件也是一个vue实例  vue实例也是一个组件 -->
    <div id='app'>
        <my-component></my-component>
        <hr>
        <my-component-name></my-component-name>
    </div>
    <script src='../js/vue.js'></script>
    <script>

        // 注册组件  Vue.component('组件名',{配置对象})

        // 组件的命名,使用短横线的方式命名组件my-component,在组件使用的时候用<my-component></my-component>
        Vue.component('my-component', {
            template: `
                <div>
                   我是子组件1
                   <MyComponentName></MyComponentName>
                   <my-component-name></my-component-name>
                </div>` ,
        });

        // 组件命名使用驼峰式,在纯结构中MyComponentName在组件使用的时候必须使用短横线的方式连接my-component-name,在字符串中使用组件可以使用驼峰方式,也可以使用 短横线的方式
        Vue.component('MyComponentName', {
            template: `
                <div>
                   我是子组件2
                </div>` ,
        });

        const vm = new Vue({
            el: '#app',
            data: {},
            methods: {},
        })


    </script>
</body>

</html>